<div class="role_management">
    <div nz-row nzGutter="16" class="row_1">
        <div nz-col nzSpan="9" class="row_2" style="margin-top: 0;">
            <button nz-button nzType="primary" (click)="showModal(1)" *ngIf="bornRoles.add">
                <i nz-icon nzType="plus"></i>新增
            </button>
            <button nz-button nzType="" (click)="showModal(2)" [disabled]="deleteRole.length !== 1"
                [class]="deleteRole.length !== 1?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"
                *ngIf="bornRoles.edit">
                <i nz-icon nzType="edit"></i>修改
            </button>
            <button nz-button nzType="" (click)="deleteMore()" [disabled]="deleteRole.length === 0"
                [class]="deleteRole.length === 0?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"
                *ngIf="bornRoles.del">
                <i nz-icon nzType="delete"></i>删除
            </button>
            <button nz-button nzType="">
                <i nz-icon nzType="download"></i>导出
            </button>
        </div>
        <div nz-col nzSpan="7"></div>
        <div nz-col nzSpan="4">
            <nz-range-picker nzDropdownClassName="date-range" ngModel (ngModelChange)="onDateChange($event)">
            </nz-range-picker>
        </div>
        <div nz-col nzSpan="4">
            <input appHotSearch (hotSearchEmit)="hotSearch()" nz-input placeholder="输入名称或者描述搜索"
                [(ngModel)]="searchValue" />
        </div>
    </div>
    <div nz-row class="row_3" nzGutter="16">
        <div nz-col nzSpan="17" class="col_1" style="margin-right: 0;">
            <!-- <div nz-row class="role_title">角色列表</div> -->
            <div nz-row class="user_table">
                <nz-table #rowSelectionTable nzTitle="角色列表" [nzData]="listOfAllData" [nzFrontPagination]="false"
                    [nzBordered]="true" nzSize="small">
                    <thead>
                        <tr>
                            <th nzShowCheckbox [(nzChecked)]="isCheckedAll" [nzIndeterminate]="isIndeterminate"
                                (nzCheckedChange)="checkAll($event)"></th>
                            <th>名称</th>
                            <!-- <th>数据权限</th> -->
                            <th>角色权限</th>
                            <th>角色级别</th>
                            <th>描述</th>
                            <th>创建日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of rowSelectionTable.data">
                            <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]"
                                (nzCheckedChange)="refreshStatus()"></td>
                            <td>{{ data.name}}</td>
                            <!-- <td>{{ data.dataScope }}</td> -->
                            <td>{{ data.permission }}</td>
                            <td>{{ data.level }}</td>
                            <td>{{ data.remark }}</td>
                            <td>{{ data.createTime }}</td>
                            <td>
                                <button (click)="getMenu(data)"
                                    [class]="selectedId==data.id?'ant-btn ant-btn-default ant-btn-icon-only active':'ant-btn ant-btn-default ant-btn-icon-only'"
                                    nz-button nzType="default">
                                    <i nz-icon nzType="eye"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
            <div nz-row class="page_row" *ngIf="listOfAllData.length!=0">
                <nz-pagination (nzPageIndexChange)="clickPage($event)" [nzPageIndex]="pageIndex" [nzTotal]="totalSize"
                    [nzPageSize]="pagesize" [nzShowTotal]="totalTemplate"></nz-pagination>
                <ng-template #totalTemplate let-total> 总共 {{totalSize}} 条 </ng-template>
            </div>
        </div>
        <div nz-col nzSpan="7" class="col_2">
            <div nz-row class="menu_title">
                <span>菜单分配</span>
                <button nz-button nzType="primary" [disabled]="selectedId === -1" (click)="saveMenuEdit()"
                    *ngIf="bornRoles.save">
                    <i nz-icon nzType="check" nzTheme="outline"></i>保存
                </button>
            </div>
            <div nz-row class="menu_content">
                <nz-tree #menuTreeComp [nzData]="menuNodes" [nzCheckStrictly]="true" nzCheckable nzMultiple>
                </nz-tree>
            </div>
        </div>
    </div>
</div>
<div id="modal_box"></div>
<nz-modal nzMaskClosable="false" appDragModal [(nzVisible)]="isVisible" [nzGetContainer]="modalDomBox"
    [nzTitle]="editId == -1?'新增角色':'编辑角色'" (nzOnCancel)="handleCancel()" [nzFooter]="null" class="hmodal">
    <form nz-form [formGroup]="roleForm" (ngSubmit)="submitFn()">
        <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>角色名称</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请输入角色名称">
                <input nz-input placeholder="请输入角色名称" formControlName="name" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>角色权限</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请输入角色权限">
                <input nz-input placeholder="请输入角色权限" formControlName="permission" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>归属部门</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请选择归属部门">
                <nz-tree-select style="width: 100%" [nzNodes]="deptData" nzPlaceHolder="请选择归属部门"
                    formControlName="depts" [nzDropdownStyle]="{left : '-200px'}">
                </nz-tree-select>
            </nz-form-control>
        </nz-form-item>
        <!-- <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>角色级别</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请输入角色级别">
                <nz-input-number nzPlaceHolder="请输入角色级别" formControlName="level"></nz-input-number>
            </nz-form-control>
        </nz-form-item> -->
        <nz-form-item>
            <nz-form-label [nzSpan]="4">描述信息</nz-form-label>
            <nz-form-control [nzSpan]="20">
                <textarea nz-input placeholder="请输入描述信息" formControlName="remark"
                    [nzAutosize]="{ minRows: 4, maxRows: 5 }"></textarea>
            </nz-form-control>
        </nz-form-item>
        <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isOkLoading">确定</button>
            </div>
        </div>
    </form>
</nz-modal>